<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var xhr = new XMLHttpRequest()
        xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
        xhr.send()
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }


        // 请求消息组成部分: 请求行/请求头部/空行/请求;四部分组成
        // 可以在终端的Nextword Request Headers view sourec里查看请求消息

        //1.请求行:GET /api/getbooks HTTP/1.1 
        //  请求行由这三部分组成：请求方式:GET 请求的url：/api/getbooks 请求的http协议版本号：HTTP/1.1   (空格隔开)

        //2.请求头部:描述客户端的基本信息 告知服务器 由多行键值对组成(冒号隔开)一般在请求行的下面
        //  常见请求头部字段参照mdn官网

        //3.空行
        // 最后一个请求头部字段的后面是一个空行 通知服务器请求头部到此结束
        // 就是用来分隔请求头和请求体的

        // -----------------------------------------
        // var xhr = new XMLHttpRequest()
        // xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')

        // // 原生post上传数据一定要指定请求头字段 告诉服务器响应回来的数据类型 FormData 此为固定写法
        // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

        // // 4.请求体 通过POST提交到服务器的数据就是请求体 
        // // 只有POST有请求体 在FormData里(必须指定了FormData请求头字段 上面那句话 才会显示在FormData)
        // // 切记get是没有请求体 因为get主用于获取数据 它只能携带少量参数到服务器 所以没有请求体 切记切记
        // xhr.send('bookname=威尼斯日记&author=阿城&publisher=个人出版社')
        // xhr.onreadystatechange = function () {
        //     if (xhr.readyState === 4 && xhr.status === 200) {
        //         console.log(xhr.responseText);
        //     }
        // }



    </script>
</body>

</html>